<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useJxtechEditTableExt, JxtechEditTableExtColumn } from "@/comp-ext";
import UnitSelectInput from "@/views/org/unit/component/unit-select-input.vue";

type ParentUnitListProps = {
  unitId?: string;
  parentUnits?: any[];
};

const props = withDefaults(defineProps<ParentUnitListProps>(), {
  unitId: "",
  parentUnits: () => []
});

const ParentUnitListTableRef = ref();

const { getInputBean, addRowData } = useJxtechEditTableExt(ParentUnitListTableRef);

const ParentUnitListState = reactive({
  data: props.parentUnits,
  onAddButtonClick() {
    addRowData({ valid: true });
  }
});

const editTableColumn: JxtechEditTableExtColumn[] = [
  {
    prop: "parentId",
    label: "上级部门",
    type: "link",
    editType: "slot",
    slot: "customParentId"
  },
  { prop: "relationType", label: "部门类型", editType: "select", codeItemId: "DEPARTMENT_TYPE" },
  { prop: "privLevel", label: "权限级别", editType: "select", codeItemId: "PRIV_LEVEL" },
  { prop: "orderNum", label: "在部门序号", editType: "input" }
];

watch(
  () => props.parentUnits,
  val => {
    ParentUnitListState.data = val;
  }
);

defineExpose({
  getInputBean: () => getInputBean()
});
</script>
<template>
  <el-divider content-position="left">上级部门列表</el-divider>
  <el-space style="margin-bottom: 12px">
    <JxtechAddButton @click="ParentUnitListState.onAddButtonClick"></JxtechAddButton>
  </el-space>
  <JxtechEditTableExt
    ref="ParentUnitListTableRef"
    :show-footer-add="false"
    :data="ParentUnitListState.data"
    :table-column="editTableColumn"
  >
    <template #customParentId="{ row }">
      <unit-select-input v-model:unitId="row.parentId" v-model:unitName="row.pUnitName"></unit-select-input>
    </template>
  </JxtechEditTableExt>
</template>
<style scoped lang="scss"></style>
